import React, { useEffect } from "react";
import { useHistory } from "react-router-dom";
import productApi from "../../api/product";
import {ConfigProvider,Table, Card, Breadcrumb, Input, Space, Button, message } from "antd";
import { useProduct } from "../../hook/product";
import zh_CN from "antd/es/locale/zh_CN";
//显示一共多少条数据
function showTotal(total) {
  return `共 ${total} 条数据`;
}
// eslint-disable-next-line import/no-anonymous-default-export
export default () => {
  let [
    { total, rows },
    { getProduct, setCurPage, setEachPage, searchProduct },
  ] = useProduct();
  const { Search } = Input;
  const onSearch = async (value) => {
    if (value === "") {
      getProduct();
    }
    const data = await productApi.searchProduct(value);
    console.log(data);
    data.length === 0 ? searchProduct([]) : searchProduct(data);
  };
  const history = useHistory();
  useEffect(() => {
    getProduct();
  }, [getProduct]);
  const columns = [
    {
      title: "序号",
      valueType: "option",
      align:"center",
      render: (text, record, _, action) => [
        // eslint-disable-next-line jsx-a11y/anchor-is-valid
        <span>{_ + 1}</span>,
      ],
    },

    {
      title: "所属大类",
      dataIndex: "navsId",
      align:"center",
      ellipsis: true,
      render: (text, record) => <span>{record.navsId.name}</span>,
    },
    {
      title: "所属小类",
      dataIndex: "tabsId",
      align:"center",
      ellipsis: true,
      render: (text, record) => <span>{record.tabsId.name}</span>,
    },
    {
      title: "商品名称",
      dataIndex: "name",
      ellipsis: true,
      align:"center",
    },
    {
      title: "商品数量",
      dataIndex: "count",
      ellipsis: true,
      align:"center",
    },
    {
      title: "商品价格",
      dataIndex: "price",
      ellipsis: true,
      align:"center",
    },

    {
      title: "商品图片",
      dataIndex: "image",
      align:"center",
      ellipsis: true,
      // eslint-disable-next-line jsx-a11y/alt-text
      render: (text, record) => (
        <img
          style={{ width: "60px", height: "60px" }}
          src={`/resource${record.image}`}
        />
      ),
    },
    {
      title: "操作",
      valueType: "option",
      align:"center",
      render: (text, record, _, action) => [
        <div style={{ display: "flex", flexDirection: "row", width: "100px" }}>
          <Button
            type="primary"
            key="editable"
            style={{ marginRight: "5px", borderRadius: "25px" }}
            onClick={() => {
              const { _id } = record;
              history.push(`/info/update/${_id}`);
            }}
          >
            修改
          </Button>
          <Button
            type="primary"
            style={{
              borderRadius: "25px",
              backgroundColor: "red",
              borderColor: "red",
            }}
            onClick={() => {
              const { _id } = record;
              productApi.delete(_id);
              getProduct();
            }}
          >
            删除
          </Button>
        </div>,
      ],
    },
  ];
  return (
    <div className="site-card-border-less-wrapper">
      <Space direction="vertical" style={{ width: "100%" }}>
        <Card>
          <Breadcrumb>
            <Breadcrumb.Item>主页</Breadcrumb.Item>
            <Breadcrumb.Item>
              <a href="#/info/product">商品</a>
            </Breadcrumb.Item>
            <Breadcrumb.Item>
              <a href="#/info/product">商品列表</a>
            </Breadcrumb.Item>
          </Breadcrumb>
          <Space style={{ marginTop: "5px" }}>
            <Search
              placeholder="请输入商品信息"
              onSearch={onSearch}
              enterButton
              style={{ width: "600px" }}
            />
          </Space>
        </Card>
        <Card>
        <ConfigProvider ConfigProvider locale={zh_CN}>
          <Table
            columns={columns}
            dataSource={rows}
            rowKey={(record) => record._id}
            pagination={{
              total,
              showTotal,
              onChange: (page, pageSize) => {
                setCurPage(page);
                setEachPage(pageSize);
              },
            }}
          />
          </ConfigProvider>
        </Card>
      </Space>
    </div>
  );
};
